import React, { useState } from 'react'
import { MinusOutline, AddOutline } from 'antd-mobile-icons'
import styles from './index.module.css'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { NavBar, Tag, Card } from 'antd-mobile'
import { SubmitBar } from 'react-vant';
import dayjs from 'dayjs'
function Index() {
    const navigate = useNavigate()
    const [date] = useState(dayjs().format('MM月DD日'))
    const [sq] = useSearchParams()
    const price = sq.get('price')
    const title = sq.get('title')
    const { state } = useLocation()
    console.log(price, title, state);
    const handlePay = () => {
        navigate(`/orderConfig?price=${price}`,{state:state})
    }

    return (
        <div>
            <div><NavBar onBack={() => navigate(-1)}>填写订单</NavBar></div>
            <div className={styles.box_wroe}>
                <span className={styles.tick_wroe}>
                    <span><Tag color='warning'>1程</Tag>{date}</span>
                    <span>{state.start}<MinusOutline />{state.end}</span>
                    <span>{title}</span>
                </span>
                <span className={styles.tick_wroe}>
                    <span><Tag color='warning'>2程</Tag>{date}</span>
                    <span>{state.start}<MinusOutline />{state.end}</span>
                    <span>{title}(候补)</span>
                </span>
                <span>
                    车票 ￥{price}  出行无忧
                </span>
            </div>
            <div>
                <Card title='选择乘客'>
                    <div
                        className={styles.btn_wroe}
                        onClick={()=>navigate('/addpreson')}
                    >
                        <AddOutline />添加乘客(成人/学生/儿童)
                    </div>
                </Card>
            </div>
            <SubmitBar price={price*100} buttonText="提交订单" onSubmit={()=>handlePay()} />
        </div>
    )
}

export default Index
